<template>
  <div class="detail-container" v-loading="pageLoading" element-loading-text="正在加载数据..."
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="el-icon-link"></i>
            关联关系查询详情
          </h1>
          <div class="page-breadcrumb">
            <span class="breadcrumb-item">单据管理</span>
            <i class="el-icon-arrow-right"></i>
            <span class="breadcrumb-item">关联关系查询</span>
            <i class="el-icon-arrow-right"></i>
            <span class="breadcrumb-current">查询详情</span>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" icon="el-icon-back" @click="goBack">
            返回列表
          </el-button>
        </div>
      </div>
    </div>

    <!-- 单据基本信息 -->
    <div class="content-section">
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <i class="el-icon-info"></i>
            <span>基本信息</span>
          </div>
          <el-tag type="success" size="small">
            查询成功
          </el-tag>
        </div>

        <div class="info-grid">
          <div class="info-row">
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-document-copy"></i>
                单据号
              </div>
              <div class="info-value">{{ billsInfo.billsID || '-' }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-collection-tag"></i>
                单据类型
              </div>
              <div class="info-value">{{ getBillsTypeDisplayText(billsInfo.billsType, billsInfo.erpTypeInfo) }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-user"></i>
                操作用户
              </div>
              <div class="info-value">{{ billsInfo.userID || '-' }}</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-office-building"></i>
                往来单位
              </div>
              <div class="info-value">{{ billsInfo.billsCD || '-' }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-time"></i>
                确认时间
              </div>
              <div class="info-value">{{ formatDateTime(billsInfo.checkDate) }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-view"></i>
                追溯码
              </div>
              <div class="info-value">{{ billsInfo.remarks1 ? billsInfo.remarks1.replace('追溯码: ', '') : '-' }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 药品明细信息 -->
    <div class="content-section">
      <el-card class="detail-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <i class="el-icon-menu"></i>
            <span>药品明细</span>
          </div>
          <div class="header-stats">
            <el-tag type="info" size="small">
              共 {{ drugInfoList.length }} 条记录
            </el-tag>
          </div>
        </div>

        <el-table
          :data="drugInfoList"
          class="detail-table"
          :header-cell-style="{
            fontWeight: '600',
            fontSize: '13px'
          }"
          :row-style="{ height: '50px' }"
          stripe
        >
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="药品ID" align="center" prop="drugID" min-width="100" show-overflow-tooltip />
          <el-table-column label="药品名称" align="center" prop="drugName" min-width="150" show-overflow-tooltip />
          <el-table-column label="规格" align="center" prop="drugGG" min-width="120" show-overflow-tooltip />
          <el-table-column label="单位" align="center" prop="drugDW" width="80" />
          <el-table-column label="数量" align="center" prop="drugNum" width="100" />
          <el-table-column label="确认数量" align="center" prop="drugCheckNum" width="100" />
          <el-table-column label="生产厂家" align="center" prop="drugCD" min-width="150" show-overflow-tooltip />
          <el-table-column label="批号" align="center" prop="drugBatchNo" min-width="120" />
          <el-table-column label="生产日期" align="center" prop="drugPD" width="120">
            <template slot-scope="scope">
              {{ formatDateOnly(scope.row.drugPD) }}
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center" prop="drugExp" width="120">
            <template slot-scope="scope">
              {{ formatDateOnly(scope.row.drugExp) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 追溯码信息 -->
    <div class="content-section">
      <el-card class="trace-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <i class="el-icon-connection"></i>
            <span>追溯码信息</span>
          </div>
          <div class="header-stats">
            <el-tag type="warning" size="small">
              共 {{ traceInfoList.length }} 条记录
            </el-tag>
            <el-button type="success" icon="el-icon-download" size="mini" @click="handleExportTrace">
              导出追溯码
            </el-button>
          </div>
        </div>

        <!-- 树状展示追溯码信息 -->
        <div v-if="treeTraceInfo.length > 0" class="tree-trace-container">
          <el-tree
            ref="traceTree"
            :data="treeTraceInfo"
            :props="treeProps"
            :expand-on-click-node="false"
            :default-expand-all="true"
            node-key="curCode"
            class="trace-tree"
          >
            <span class="tree-node" slot-scope="{ node, data }">
              <div class="node-content">
                <div class="node-header">
                  <el-tag :type="getCodeLevelTagType(data.codeLevel)" size="mini" class="level-tag">
                    {{ getCodeLevelText(data.codeLevel) }}
                  </el-tag>
                  <!-- 只有当状态不是未知时才显示状态标签 -->
                  <el-tag
                    v-if="data.codeState && getCodeStateText(data.codeState) !== '未知'"
                    :type="getCodeStateTagType(data.codeState)"
                    size="mini"
                    class="state-tag"
                  >
                    <i class="el-icon-circle-check" v-if="data.codeState === '0'"></i>
                    <i class="el-icon-circle-close" v-else></i>
                    {{ getCodeStateText(data.codeState) }}
                  </el-tag>
                  <!-- 追溯码显示在标签旁边 -->
                  <span class="code-display">{{ data.curCode }}</span>
                </div>

                <div class="node-info">
                  <span class="info-item">
                    <i class="el-icon-time"></i>
                    {{ formatDateTime(data.scanTime) }}
                  </span>
                  <span class="info-item" v-if="data.remark">
                    <i class="el-icon-document"></i>
                    {{ data.remark }}
                  </span>
                  <!-- 展开/收起按钮 -->
                  <el-button
                    v-if="data.codeLevel !== '1' && data.codeLevel !== 1"
                    size="mini"
                    :type="data.isExpanded ? 'warning' : 'primary'"
                    :icon="data.isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                    :loading="data.isLoading"
                    @click="toggleNode(data)"
                    class="expand-btn"
                  >
                    {{ data.isExpanded ? '收起' : '查看下级' }}
                  </el-button>
                </div>
              </div>
            </span>
          </el-tree>
        </div>

        <!-- 如果没有树状数据，显示原始表格 -->
        <el-table
          v-else
          :data="traceInfoList"
          class="trace-table"
          :header-cell-style="{
            fontWeight: '600',
            fontSize: '13px'
          }"
          :row-style="{ height: '50px' }"
          stripe
        >
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="当前码" align="center" prop="curCode" min-width="200" show-overflow-tooltip />
          <el-table-column label="码级别" align="center" prop="codeLevel" width="80">
            <template slot-scope="scope">
              <el-tag :type="getCodeLevelTagType(scope.row.codeLevel)">
                {{ getCodeLevelText(scope.row.codeLevel) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="父级码" align="center" prop="parentCode" min-width="200" show-overflow-tooltip />
          <el-table-column label="扫描时间" align="center" prop="scanTime" width="160">
            <template slot-scope="scope">
              {{ formatDateTime(scope.row.scanTime) }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" min-width="300" show-overflow-tooltip />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/wareHouse/list'
import { getBarRelationList, detectCodeLevel, getBarRelationChildCodes } from '@/api/wareHouse/barRelation'

export default {
  name: 'BarRelationDetail',
  data() {
    return {
      // 单据信息
      billsInfo: {},
      // 药品信息列表
      drugInfoList: [],
      // 明细信息列表
      detailInfoList: [],
      // 追溯码信息列表
      traceInfoList: [],
      // 单据ID
      billsID: null,
      // 页面加载状态
      pageLoading: false,
      // 树状组件配置
      treeProps: {
        children: 'children',
        label: 'curCode'
      }
    };
  },
  computed: {
    // 树状结构的追溯码信息
    treeTraceInfo() {
      if (!this.traceInfoList || this.traceInfoList.length === 0) {
        return [];
      }

      // 构建树状结构
      return this.buildTraceTree(this.traceInfoList);
    }
  },
  created() {
    this.initPageData();
  },
  beforeRouteUpdate(to, from, next) {
    // 路由更新时（比如从一个详情页跳转到另一个详情页）
    console.log('路由更新，清空数据并重新加载');
    this.clearPageData();
    next();
    // 在next()之后重新初始化数据
    this.$nextTick(() => {
      this.initPageData();
    });
  },
  watch: {
    // 监听路由变化，当单据ID变化时重新初始化数据
    '$route.query.billsID': {
      handler(newBillsID, oldBillsID) {
        if (newBillsID !== oldBillsID) {
          console.log('单据ID变化，重新初始化数据:', newBillsID);
          this.initPageData();
        }
      },
      immediate: false
    }
  },
  methods: {
    /** 初始化页面数据 */
    initPageData() {
      // 先清空所有数据
      this.clearPageData();

      // 获取新的单据ID
      this.billsID = this.$route.query.billsID;
      console.log('接收到的单据ID:', this.billsID);

      if (this.billsID) {
        this.getBillsDetail();
      } else {
        this.$modal.msgError("单据号不能为空");
        this.pageLoading = false; // 清除加载状态
      }
    },

    /** 清空页面数据 */
    clearPageData() {
      console.log('清空页面数据');

      // 设置加载状态
      this.pageLoading = true;

      // 清空所有数据
      this.billsInfo = {};
      this.drugInfoList = [];
      this.detailInfoList = [];
      this.traceInfoList = [];
      this.billsID = null;

      // 如果有树组件的引用，也清空树的展开状态
      if (this.$refs.traceTree) {
        this.$refs.traceTree.setCurrentKey(null);
      }
    },

    /** 获取单据详情 */
    getBillsDetail() {
      if (!this.billsID) {
        this.$modal.msgError("单据号不能为空");
        return;
      }

      console.log('开始获取单据详情，单据ID:', this.billsID);

      getList(this.billsID).then(response => {
        console.log('获取单据详情成功:', response.data);
        this.billsInfo = response.data;
        this.drugInfoList = response.data.pdaWarehouseBillsDetailList || [];
        this.detailInfoList = response.data.pdaWarehouseBillsDetailList || [];

        // 获取单据详情成功后，再获取追溯码信息
        this.getTraceInfo();
      }).catch(error => {
        console.error('获取单据详情失败:', error);
        this.$modal.msgError("获取单据详情失败");
        // 即使失败也要清除加载状态
        this.pageLoading = false;
      });
    },

    /** 获取追溯码信息 */
    getTraceInfo() {
      // 从单据备注中提取追溯码
      const queryBarCode = this.billsInfo.remarks1 ? this.billsInfo.remarks1.replace('追溯码: ', '') : '';

      if (!queryBarCode) {
        console.warn('未找到追溯码信息');
        this.pageLoading = false; // 清除加载状态
        return;
      }

      console.log('查询追溯码:', queryBarCode);

      // 直接查询所有相关的追溯码信息
      getBarRelationList({ barCode: queryBarCode, noPaging: true }).then(response => {
        console.log('获取追溯码信息成功:', response);
        this.traceInfoList = response.rows || [];
      }).catch(error => {
        console.error('获取追溯码信息失败:', error);
        this.$modal.msgError("获取追溯码信息失败");
      }).finally(() => {
        // 无论成功还是失败，都清除加载状态
        this.pageLoading = false;
        console.log('页面数据加载完成');
      });
    },

    /** 返回上一页 */
    goBack() {
      this.$router.go(-1);
    },

    /** 格式化日期时间 */
    formatDateTime(dateTime) {
      if (!dateTime) return '-';

      const date = new Date(dateTime);
      if (isNaN(date.getTime())) return dateTime;

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    /** 格式化日期（仅年月日） */
    formatDateOnly(dateTime) {
      if (!dateTime) return '-';

      const date = new Date(dateTime);
      if (isNaN(date.getTime())) return dateTime;

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    /** 构建树状结构 */
    buildTraceTree(traceList) {
      if (!traceList || traceList.length === 0) {
        return [];
      }

      // 创建映射表
      const codeMap = new Map();
      const rootNodes = [];

      // 先将所有节点放入映射表，并初始化状态
      traceList.forEach(item => {
        const node = {
          ...item,
          children: [],
          isExpanded: false,
          isLoading: false
        };
        codeMap.set(item.curCode, node);
      });

      // 构建父子关系
      traceList.forEach(item => {
        const node = codeMap.get(item.curCode);

        if (item.parentCode && item.parentCode.trim() !== '' && codeMap.has(item.parentCode)) {
          // 有父节点，添加到父节点的children中
          const parentNode = codeMap.get(item.parentCode);
          parentNode.children.push(node);
        } else {
          // 没有父节点或父节点不在当前列表中，作为根节点
          rootNodes.push(node);
        }
      });

      // 如果没有找到根节点，按级别排序显示所有节点
      if (rootNodes.length === 0) {
        return traceList.map(item => ({
          ...item,
          children: [],
          isExpanded: false,
          isLoading: false
        }))
          .sort((a, b) => {
            const levelA = parseInt(a.codeLevel) || 0;
            const levelB = parseInt(b.codeLevel) || 0;
            return levelA - levelB;
          });
      }

      return rootNodes;
    },

    /** 切换节点展开/收起状态 */
    async toggleNode(node) {
      // 检查是否已经是最小级别（1级码）
      if (node.codeLevel === '1' || node.codeLevel === 1) {
        this.$modal.msgInfo('1级码是最小级别，无法继续展开');
        return;
      }

      // 如果已经展开，则收起
      if (node.isExpanded) {
        this.collapseNode(node);
        return;
      }

      // 如果未展开，则展开
      await this.expandNode(node);
    },

    /** 展开节点，查询下级码 */
    async expandNode(node) {
      try {
        // 设置加载状态
        this.$set(node, 'isLoading', true);

        console.log(`查询下级码: ${node.curCode}, 当前级别: ${node.codeLevel}`);

        // 调用后端接口查询下级码
        const response = await getBarRelationChildCodes(node.curCode);

        if (response.code === 200 && response.data && response.data.length > 0) {
          // 将子节点添加到当前节点，并初始化状态
          const childNodes = response.data.map(child => ({
            ...child,
            children: [],
            isExpanded: false,
            isLoading: false
          }));

          this.$set(node, 'children', childNodes);
          this.$set(node, 'isExpanded', true);

          console.log(`展开成功，找到${response.data.length}个子节点`);
          this.$modal.msgSuccess(`展开成功，找到${response.data.length}个下级码`);
        } else {
          this.$modal.msgInfo('该码下没有下级码');
        }
      } catch (error) {
        console.error('展开节点失败:', error);
        this.$modal.msgError('展开失败');
      } finally {
        // 清除加载状态
        this.$set(node, 'isLoading', false);
      }
    },

    /** 收起节点 */
    collapseNode(node) {
      // 清空子节点
      this.$set(node, 'children', []);
      this.$set(node, 'isExpanded', false);

      console.log(`收起节点: ${node.curCode}`);
      this.$modal.msgSuccess('已收起下级码');
    },

    /** 获取码级别标签类型 */
    getCodeLevelTagType(codeLevel) {
      switch(codeLevel) {
        case '1': return 'success';  // 一级码 - 绿色
        case '2': return 'warning';  // 二级码 - 橙色
        case '3': return 'info';     // 三级码 - 蓝色
        default: return '';
      }
    },

    /** 获取码级别文本 */
    getCodeLevelText(codeLevel) {
      switch(codeLevel) {
        case '1': return '一级码';
        case '2': return '二级码';
        case '3': return '三级码';
        default: return '未知';
      }
    },

    /** 获取码状态标签类型 */
    getCodeStateTagType(codeState) {
      switch(codeState) {
        case '0': return 'success';  // 正常
        case '1': return 'danger';   // 异常
        default: return 'info';
      }
    },

    /** 获取码状态文本 */
    getCodeStateText(codeState) {
      switch(codeState) {
        case '0': return '正常';
        case '1': return '异常';
        default: return '未知';
      }
    },

    /** 获取单据类型显示文本 */
    getBillsTypeDisplayText(billsType, erpTypeInfo) {
      // 优先使用erpTypeInfo（中文显示文本）
      if (erpTypeInfo) {
        return erpTypeInfo;
      }

      // 如果没有erpTypeInfo，则根据billsType进行映射
      const billsTypeDisplayMap = {
        // 入库类型
        'PurchaseWareHouseIn': '采购入库',
        'ProduceWareHouseIn': '生产入库',
        'ReturnWareHouseIn': '退货入库',
        'AllocateWareHouseIn': '调拨入库',
        'GiftWareHouseIn': '赠品入库',
        'OtherWareHouseIn': '其他入库',
        // 出库类型
        'SalesWareHouseOut': '销售出库',
        'ReturnWareHouseOut': '退货出库',
        'AllocateWareHouseOut': '调拨出库',
        'ReworkWareHouseOut': '返工出库',
        'DestoryWareHouseOut': '销毁出库',
        'InspectionWareHouseOut': '抽检出库',
        'DirectWareHouseOut': '直调出库',
        'GiftWareHouseOut': '赠品出库',
        'OtherWareHouseOut': '其他出库',
        'RetailWareHouseOut': '使用出库',
        // 数字类型映射
        '201': '销售出库'
      };

      return billsTypeDisplayMap[billsType] || billsType || '未知类型';
    },

    /** 导出追溯码信息 */
    handleExportTrace() {
      if (this.traceInfoList.length === 0) {
        this.$modal.msgWarning("没有可导出的追溯码数据");
        return;
      }

      this.$modal.confirm(`是否确认导出当前单据的追溯码信息？（共 ${this.traceInfoList.length} 条记录）`).then(() => {
        this.$modal.loading("正在导出追溯码数据，请稍候...");

        // 使用原来单据导出的接口，传递单据ID
        this.download('/wareHouse/list/exportSelected', {
          billsIDs: this.billsInfo.billsID
        }, `单据追溯码数据_${this.billsInfo.billsID || 'unknown'}_${new Date().getTime()}.xlsx`);
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;

  i {
    margin-right: 12px;
    font-size: 28px;
  }
}

.page-breadcrumb {
  font-size: 14px;
  opacity: 0.9;
  display: flex;
  align-items: center;

  .breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
  }

  .breadcrumb-current {
    color: white;
    font-weight: 500;
  }

  i {
    margin: 0 8px;
    font-size: 12px;
  }
}

.header-actions {
  .el-button {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
  }
}

.content-section {
  max-width: 1200px;
  margin: 0 auto 20px auto;
  padding: 0 24px;
}

.info-card, .detail-card, .trace-card {
  border-radius: 8px;
  border: none;

  ::v-deep .el-card__header {
    background: #fafbfc;
    border-bottom: 1px solid #e8eaec;
    padding: 16px 20px;
  }

  ::v-deep .el-card__body {
    padding: 24px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #303133;

  i {
    margin-right: 8px;
    font-size: 18px;
    color: #409eff;
  }
}

.header-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-grid {
  .info-row {
    display: flex;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-group {
    flex: 1;
    margin-right: 40px;

    &:last-child {
      margin-right: 0;
    }
  }

  .info-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;

    i {
      margin-right: 6px;
      color: #909399;
    }
  }

  .info-value {
    font-size: 15px;
    color: #303133;
    font-weight: 500;
    word-break: break-all;
  }
}

.detail-table, .trace-table {
  ::v-deep .el-table__header {
    th {
      background-color: #f8f9fa !important;
      color: #495057;
      font-weight: 600;
      border-bottom: 2px solid #dee2e6;
    }
  }

  ::v-deep .el-table__body {
    tr {
      &:hover {
        background-color: #f8f9fa;
      }
    }

    td {
      border-bottom: 1px solid #ebeef5;
      vertical-align: middle;
    }
  }
}

// 树状展示样式
.tree-trace-container {
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  margin: 16px 0;
}

.trace-tree {
  background: white;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tree-node {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
}

.node-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-header {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.code-display {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #333;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
  margin-left: 8px;
  flex: 1;
  min-width: 200px;
}

.expand-btn {
  margin-left: 10px;
  font-size: 12px;
  transition: all 0.3s ease;

  &.el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;

    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }

  &.el-button--warning {
    background-color: #E6A23C;
    border-color: #E6A23C;

    &:hover {
      background-color: #ebb563;
      border-color: #ebb563;
    }
  }

  &.is-loading {
    pointer-events: none;
  }
}



.level-tag, .state-tag {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}



.node-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

.info-item i {
  font-size: 14px;
  color: #999;
}

// 自定义树组件样式
::v-deep .el-tree {
  .el-tree-node__content {
    height: auto !important;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .el-tree-node__content:hover {
    background-color: #f8f9ff;
  }

  .el-tree-node__expand-icon {
    color: #409EFF;
    font-size: 16px;
  }

  .el-tree-node__expand-icon.expanded {
    transform: rotate(90deg);
  }

  .el-tree-node__label {
    font-weight: normal;
  }

  .el-tree-node {
    white-space: normal;
  }

  .el-tree-node__children {
    padding-left: 20px;
    border-left: 2px solid #e4e7ed;
    margin-left: 10px;
  }
}

// 级别分组样式
.level-group {
  margin-bottom: 24px;

  .level-header {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 2px solid #f0f2f5;

    .el-tag {
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
    }
  }

  .trace-table {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-header {
    padding: 16px 16px;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .content-section {
    padding: 0 16px;
  }

  .info-grid .info-row {
    flex-direction: column;

    .info-group {
      margin-right: 0;
      margin-bottom: 16px;
    }
  }
}
</style>
